<template>
  <div class="container">
    <el-alert
      type="warning"    effect="dark" style="    padding: 5px 0px;    margin-bottom: 10px;font-size: 14px"
      :closable="false">
      <i class="el-icon-info" style="margin-right: 5px;">  选择扎帐日期，点击扎帐按钮，系统自动汇总各科室的成本数据。扎帐金额与科室金额完全匹配才可进行审核操作(即数字按钮全为绿色时)！</i>
    </el-alert>

    <el-form ref="form" label-width="120px"  @submit.native.prevent :inline="true"  class="form1" >
      <el-form-item  label="截止日期">
        <el-date-picker
          v-model="endDate"
          align="left"
          type="date"
          placeholder="请选择"
          ref="endDate"
          :picker-options="pickerOptions" >
        </el-date-picker>
      </el-form-item>
      <el-form-item label="请扫描业务单号" label-width="150px">
        <el-input size="larger" ref="txtScan" v-model="txtScan" placeholder="出库单/消耗单/计费单" @keyup.native.enter="doScan"  ></el-input>
      </el-form-item>
      <el-form-item label="">
<!--        <el-button   type="primary" @click="checkInit" size="larger">扎账</el-button>-->
        <el-button   type="success" @click="auditBatch" size="larger" >审核通过</el-button>
        <el-button   type="" @click="gridSearch(true)" size="larger">重置</el-button>
      </el-form-item>
    </el-form>
    <el-form ref="form2" label-width="120px"  @submit.native.prevent :inline="true" class="form2" >
      <el-form-item label="科室筛选">
        <el-select  v-model="deptId" filterable clearable placeholder="请选择科室" @change="gridSearch" style="    width: 220px;">
          <el-option
            v-for="item in depts"
            :key="item.dept_id"
            :label="item.dept_name"
            :value="item.dept_id">
          </el-option>
        </el-select>
      </el-form-item>
      <el-form-item  label="单据状态"  label-width="129px"  >
        <el-radio-group v-model="statusRadio" @change="gridSearch" style="    padding-left: 50px;">
          <el-radio :label="'start'">未审核</el-radio>
          <el-radio :label="'end'">已审核</el-radio>
        </el-radio-group>
      </el-form-item>
    </el-form>

    <data-view
      propViewKey="finance_account_check"
      propViewForm="finance/accountcheck/detail.vue"
      :propFlowKey="propFlowKey"
      ref="dataview"
      :propAutoFetchData="false"
      :propCustomCols="myPropCustomCols"
      :propShowToolBar="true"
      :propDisableCheck="propDisableCheck"
      :propHideQueryButton="true"
      :propHidePageSearch="true"
      class="data-view-main"
      @after-load="afterLoad"

    >

      <template #amountUse="{field,value,row}" >
        <el-button-group>
          <el-button type="success" size="mini" round  >{{row.amountUse}}</el-button>
          <el-button type="success" size="mini" round  v-if="row.amountUse == row.amountUseCheck ">{{row.amountUseCheck}}</el-button>
          <el-button type="warning" size="mini" round  v-else>{{row.amountUseCheck}}</el-button>
        </el-button-group>
      </template>

      <template #amountOut="{field,value,row}" >
        <el-button-group>
          <el-button type="success" size="mini" round  >{{row.amountOut}}</el-button>
          <el-button type="success" size="mini" round  v-if="row.amountOut == row.amountOutCheck ">{{row.amountOutCheck}}</el-button>
          <el-button type="warning" size="mini" round  v-else>{{row.amountOutCheck}}</el-button>
        </el-button-group>
      </template>

      <template #amountPatient="{field,value,row}" >
        <el-button-group>
          <el-button type="success" size="mini" round  >{{row.amountPatient}}</el-button>
          <el-button type="success" size="mini" round  v-if="row.amountPatient == row.amountPatientCheck ">{{row.amountPatientCheck}}</el-button>
          <el-button type="warning" size="mini" round  v-else>{{row.amountPatientCheck}}</el-button>
        </el-button-group>

      </template>

      <template #sumUse="{field,value,row}" >
        <el-button-group>
          <el-button type="success" size="mini" round  >{{row.sumUse}}</el-button>
          <el-button type="success" size="mini" round  v-if="row.sumUseCheck == row.sumUseCheck ">{{row.sumUseCheck}}</el-button>
          <el-button type="warning" size="mini" round  v-else>{{row.sumUseCheck}}</el-button>
        </el-button-group>
      </template>

      <template #sumOut="{field,value,row}" >
        <el-button-group>
          <el-button type="success" size="mini" round  >{{row.sumOut}}</el-button>
          <el-button type="success" size="mini" round  v-if="row.sumOut == row.sumOutCheck ">{{row.sumOutCheck}}</el-button>
          <el-button type="warning" size="mini" round  v-else>{{row.sumOutCheck}}</el-button>
        </el-button-group>
      </template>

      <template #sumPatient="{field,value,row}" >
        <el-button-group>
          <el-button type="success" size="mini" round  >{{row.sumPatient}}</el-button>
          <el-button type="success" size="mini" round  v-if="row.sumPatient == row.sumPatientCheck ">{{row.sumPatientCheck}}</el-button>
          <el-button type="warning" size="mini" round  v-else>{{row.sumPatientCheck}}</el-button>
        </el-button-group>
      </template>

      <template #flowStatus="{field,value,row}" >

        <el-tag v-if="value == 'end'" type="success" effect="dark">已审核</el-tag>
        <el-tag v-else type="warning" effect="dark">未审核</el-tag>
      </template>

    </data-view>
  </div>
</template>

<script>
/*eslint-disable*/
import FortenGrid from '@/components/common/FortenGrid.vue'
import dates from "../../../util/dates";

export default {
  name: 'accountcheck',
  data() {
    return {
      txtScan: null,
      endDate: null,
      deptId: null,
      depts:[],
      statusRadio:'start',
      //日期选项
      pickerOptions: {
        disabledDate(time) {
          const date = new Date();
          // date.setTime(date.getTime() - 3600 * 1000 * 24);
          return time.getTime() > date.getTime();
        },
        shortcuts: [{
          text: '昨天',
          onClick(picker) {
            const date = new Date();
            date.setTime(date.getTime() - 3600 * 1000 * 24);
            picker.$emit('pick', date);
          }
        }],
      },
      propDisableCheck: `row.flowStatus == 'end' || (row.amountUse + row.amountOut + row.amountPatient ) != ( row.amountUseCheck + row.amountOutCheck + row.amountPatientCheck)`
    }
  },
  methods: {
    //扎账
    checkInit(){
      if(!this.endDate){
        this.utilMessage.warning('请先选择扎账截止日期')
        this.$refs.endDate.focus()
        return
      }
      if(typeof(this.endDate)=='string')  this.endDate = new Date(this.endDate)
      this.endDate = this.endDate.format('yyyy-MM-dd')

      let param ={
        endDate: this.endDate
      }
      this.utilVue.loadShow(true)
      this.$ajax.post('/finance/account_check/checkInit', param).then(resp => {
        if ( resp.code == 0 ){
          this.utilMessage.success(resp.msg)
          this.$refs.dataview.ocRefresh()
        }
        this.utilVue.loadHide()
      })
    },

    //批量审核
    auditBatch(){
      let data = this.$refs.dataview.$refs.tbMain.getCheckboxRecords()
      if (!data || data.length <1) {
        this.utilMessage.warning('请选择需要操作的扎账单')
        return
      }

      this.utilVue.loadShow(true)
      this.$ajax.post('/finance/account_check/auditBatch', data.map(row => row.id)).then(resp => {
        if ( resp.code == 0 ){
          this.utilMessage.success(resp.msg)
          this.$refs.dataview.ocRefresh()
        }
        this.utilVue.loadHide()
      })
    },
    //扫码单号
    doScan() {
      if(!this.txtScan){
        this.$refs.txtScan.focus()
        this.utilMessage.warning(" 请输入单号进行操作")
        return
      }
      this.utilVue.loadShow(true)
      this.$ajax.get(`/finance/account_check/scanBusKey?busKey=${this.txtScan}` ).then((response) => {
        if(response.code == 0 ){
          this.utilMessage.success(response.msg)

          this.$refs.dataview.ocRefresh()

        }
        this.txtScan = '';
        this.$refs.txtScan.focus()
        this.utilVue.loadHide()
      })
    },

    //查询部门数据
    getDepts(){
      //查询数据，只查询扎账单包含的数据
      let wrapper = this.$newWrapper()
      const params = {
        queryString: utilVue.json2str(wrapper.queryConditions),
        orderString: null
      }
      this.$ajax.get('/finance/account_check/getDeptsUnique', { params },{
        params
      }).then(resp => {
        this.depts = resp.data
      })
    },
    //搜索表格
    gridSearch(isReset){
      if(isReset && isReset == true){
        this.deptId = null
        this.statusRadio='start'
        this.txtScan = null
      }

      let wrapper = this.$newWrapper()
      if(this.deptId)  wrapper.eq('deptId', this.deptId)

      wrapper.eq('flowStatus', this.statusRadio)
      this.$refs.dataview.setQueryWrapper(wrapper)



    },
    afterLoad(){
      //选中可以审核的行
      this.$refs.dataview.$refs.tbMain.setAllCheckboxRow(true)
    }
  },
  props: ['propFlowKey'],
  mounted() {
    this.gridSearch()

    //默认显示昨天
    const date = new Date();
    // date.setTime(date.getTime() - 3600 * 1000 * 24);
    this.endDate = date
    //加载部门数据
    this.getDepts()
    //聚焦扫描框
    this.$refs.txtScan.focus()
  },
  computed: {
    //自定义列
    myPropCustomCols(){
      return [
        {
          name: 'amountUse',
          cmode: 'edit'
        },
        {
          name: 'amountOut',
          cmode: 'edit'
        },
        {
          name: 'amountPatient',
          cmode: 'edit'
        },
        {
          name: 'sumUse',
          cmode: 'edit'
        },
        {
          name: 'sumOut',
          cmode: 'edit'
        },
        {
          name: 'sumPatient',
          cmode: 'edit'
        },
        {
          name: 'flowStatus',
          cmode: 'edit'
        }

      ]
    }
  }

}
</script>

<style lang="scss" scoped>
  .container {
    height: 100%;
    background-color: #fff;

    .form1{
      .el-form-item{
        margin-bottom: 9px;
      }
    }

    .form2{
      margin-bottom: -10px;

      .el-form-item{
        margin-bottom: 0px;

      }
    }

    .data-view-main{
      padding-top: 20px;
      /deep/ .vxe-grid{
        .vxe-toolbar{
          height: 0px;
        }
        .vxe-tools--operate{
          margin-top: -60px;
        }
        .el-badge{
          sup{
            height: 30px;
            line-height: 27px;
            font-size: 14px;
          }
        }
      }
    }

    .el-button-group{
      min-width: 100%;
      display: -webkit-box;
      display: -ms-flexbox;
      display: flex;
      .el-button{
        padding: 2px;
        font-size: 14px;
        -webkit-box-flex: 1;
        -ms-flex: 1;
        flex: 1;
        text-align: center;
      }
    }



  }

</style>
